<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/jquery.2.1.4.js" charset="utf-8"></script>
    <script src="/echarts/echarts.common.min.js" charset="utf-8"></script>
</head>
<body>
<body>
<div id="main" style="width: 75%;height:75%;margin: 5% 10% 5% 10%"></div>

<script type="text/javascript">
    var val = ${values};
    var roles = [];
    var ings = [];
    var ends = [];
    for (var i = 0; i < val.length; i++) {
        roles.push(val[i].rolName);
        ings.push(val[i].ping);
        ends.push(val[i].pend);
    }
    var myChart = echarts.init(document.getElementById('main'));
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];
    option = {
        title: {
            text: '各部门问题处理量',
        },
        color: ['#006699', '#4cabce'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['进行中', '已结束']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: roles
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '进行中',
                type: 'bar',
                barGap: 0,
                data: ings
            },
            {
                name: '已结束',
                type: 'bar',
                data: ends
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</body>
</html>
